<script setup lang="ts">
import { ref, computed } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { toast } from '@/utils/common'
import { getDefault } from '@/api/address'
import { getGoodsDetail } from '@/api/goods'
import { createOrder } from '@/api/order'
import type { Goods } from '@/api/goods/type'
import type { Address } from '@/api/address/type'
import type { CreateOrderReq } from '@/api/order/type'
import { BaseResponse } from '@/api/base'

const goodsDetail = ref<Goods>({})
const address = ref<Address>({})
const remark = ref<string>('')
const popup = ref()

const loadAddress = async () => {
  const res: BaseResponse = await getDefault()
  address.value = res.data
}
onLoad(async (option: any) => {
  if (!goodsDetail.value.id && option.id) {
    try {
      const res = await getGoodsDetail(option.id)
      goodsDetail.value = res.data
    } catch (error) {
      toast(error.tips)
    }
  }
  loadAddress()
})
uni.$on('sendAddress', (item: Address) => {
  address.value = item
})

const imageStyle = computed(() => {
  const w = uni.upx2px(750) / 5
  const rate = w / 600
  const h = rate * 400
  return {
    width: w + 'px',
    height: h + 'px'
  }
})

const jumpAddress = () => {
  uni.navigateTo({
    url: '/pages/address/index?type=order',
    events: {
      sendAddress: function (data: { address: Address }) {
        address.value = data
      }
    }
  })
}

const editRemark = () => {
  popup.value?.open()
}
const closePopUp = () => {
  popup.value?.close()
}
const submitOrder = async () => {
  if (!address.value?.id) {
    toast('请添加收货地址')
    return
  }
  if (!goodsDetail.value?.id) {
    toast('商品不存在')
    return
  }
  const req: CreateOrderReq = {
    goodsId: goodsDetail.value.id,
    addressId: address.value.id,
    remark: remark.value
  }
  try {
    const res: BaseResponse = await createOrder(req)
    uni.navigateTo({ url: '/pages/pay/index?orderNo=' + res.data })
  } catch (error) {
    toast(error.tips)
  }
}
</script>

<template>
  <view class="contains">
    <view class="address" v-if="address" @click="jumpAddress">
      <view class="address-icon">
        <uv-icon name="map-fill" color="#ff7700" size="45rpx"></uv-icon>
      </view>
      <view class="address-info">
        <view class="address-address">{{ address.building }} {{ address.address }}</view>
        <view class="address-name">{{ address.name }} {{ address.phone }}</view>
      </view>
      <uv-icon name="arrow-right" color="#ccc" size="28rpx"></uv-icon>
    </view>
    <view class="address" v-else>
      <uv-button color="#ff7744" size="small" class="address-add" text="添加收货地址" @click="jumpAddress"></uv-button>
    </view>
    <view class="goods">
      <view class="goods-publisher">
        <my-image :src="goodsDetail.avatar" mode="scaleToFill" :customStyle="{ width: '50rpx', height: '50rpx' }"
          shape="circle" />
        <view class="goods-publisher-name">{{ goodsDetail.nickname }}</view>
      </view>
      <view class="goods-info">
        <view class="goods-info-img">
          <my-image :src="goodsDetail.url?.split(',')[0]" mode="aspectFit" :customStyle="imageStyle"></my-image>
        </view>
        <uv-text :text="goodsDetail.name" :lines="2"></uv-text>
        <!--  <view class="goods-info-name">
          {{ goodsDetail.name }}
        </view> -->
        <view class="goods-info-price">
          <!-- <view class="goods-price-price">¥{{ goodsDetail.price }}</view> -->
          <uv-text mode="price" :text="goodsDetail.price" color="#ff7744" bold size="28rpx"></uv-text>
          <view class="goods-price-num">x1</view>
        </view>
      </view>
      <view class="order-remark">
        <view class="order-remark-title">订单备注</view>
        <view class="order-remark-contain" @click="editRemark">{{ remark ? remark : '无备注' }}<uv-icon
            name="arrow-right"></uv-icon></view>
      </view>
    </view>
    <uv-popup ref="popup" mode="bottom">
      <view class="popup">
        <view class="popup-title">订单备注</view>
        <uv-textarea v-model="remark" maxlength="200" count placeholder="请输入内容" height="240rpx"></uv-textarea>
        <view class="popup-btn">
          <uv-button color="#ff7744" @click="closePopUp">确定</uv-button>
        </view>
      </view>
    </uv-popup>
    <view class="order-bottom">
      <view class="order-total">
        合计：
        <view>¥{{ goodsDetail.price }}</view>
      </view>
      <uv-button color="#ff7744" class="order-btn" @click="submitOrder">提交订单</uv-button>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.address {
  background-color: #fff;
  border-radius: 10rpx;
  padding: 20rpx 20rpx;
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;

  .address-icon {
    margin-right: 10rpx;
  }

  .address-info {
    display: flex;
    flex-direction: column;
    width: calc(100% - 50rpx);

    .address-address {
      margin-bottom: 10rpx;
    }

    .address-name {
      color: #999;
    }
  }

  .address-add {
    width: 100%;
  }
}

.goods {
  background-color: #fff;
  border-radius: 10rpx;
  padding: 20rpx 20rpx;

  .goods-publisher {
    display: flex;
    align-items: center;
    margin-bottom: 20rpx;

    .goods-publisher-name {
      font-size: 24rpx;
      margin-left: 20rpx;
    }
  }

  .goods-info {
    display: flex;
    margin-bottom: 40rpx;

    .goods-info-img {
      margin-right: 20rpx;
    }

    .goods-info-price {
      display: flex;
      align-items: end;
      flex-direction: column;
      justify-content: space-between;

      .goods-price-price {
        color: #ff7700;
        font-size: 28rpx;
        font-weight: bold;
        margin-right: 10rpx;
      }

      .goods-price-num {
        color: #999;
      }
    }
  }

  .order-remark {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20rpx;

    .order-remark-contain {
      color: #999;
      display: flex;
    }
  }
}

.popup {
  padding: 20rpx;

  .popup-title {
    font-size: 28rpx;
    font-weight: bold;
    margin-bottom: 20rpx;
    text-align: center;
  }

  .uv-textarea {
    background-color: #f1f1f1;
    border-radius: 12rpx;
  }

  .popup-btn {
    margin-top: 30%;
    margin-bottom: 80rpx;
  }
}

.order-bottom {
  position: fixed;
  bottom: 0;
  left: 0;
  width: calc(100% - 40rpx);
  background-color: #fff;
  padding: 20rpx;
  display: flex;
  justify-content: space-between;

  .order-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #ff7744;
    font-weight: bold;
    color: #ff7700;
    font-weight: bold;
  }
}
</style>
